<template>
  <view class="password-generator">
    <!-- 生成的密码显示 -->
    <view class="password-display">
      <view class="password-wrapper">
        <input
          class="password-input"
          v-model="generatedPassword"
          :password="hidePassword"
          readonly
          placeholder="点击生成密码"
        />

        <view class="password-actions">
          <view class="action-btn" @click="togglePasswordVisibility">
            <text class="action-icon">{{ hidePassword ? '👁️' : '🙈' }}</text>
          </view>

          <view class="action-btn" @click="copyPassword">
            <text class="action-icon">📋</text>
          </view>

          <view class="action-btn" @click="generatePassword">
            <text class="action-icon">🔄</text>
          </view>
        </view>
      </view>

      <!-- 密码强度指示器 -->
      <view class="strength-indicator">
        <view class="strength-bar">
          <view
            class="strength-fill"
            :class="strengthLevel.class"
            :style="{ width: strengthLevel.percentage + '%' }"
          ></view>
        </view>
        <text class="strength-text" :class="strengthLevel.class">
          {{ strengthLevel.text }}
        </text>
      </view>
    </view>

    <!-- 密码配置选项 -->
    <view class="password-options">
      <!-- 密码长度 -->
      <view class="option-group">
        <view class="option-header">
          <text class="option-label">密码长度</text>
          <text class="option-value">{{ passwordConfig.length }}</text>
        </view>
        <slider
          class="length-slider"
          :value="passwordConfig.length"
          :min="6"
          :max="32"
          @change="updateLength"
          activeColor="#1890ff"
          backgroundColor="#f0f0f0"
        />
      </view>

      <!-- 字符类型选择 -->
      <view class="option-group">
        <text class="option-label">包含字符类型</text>

        <view class="char-types">
          <view
            class="char-type-item"
            :class="{ active: passwordConfig.includeUppercase }"
            @click="toggleCharType('includeUppercase')"
          >
            <text class="char-type-text">大写字母 (A-Z)</text>
            <text class="char-type-example">ABC</text>
          </view>

          <view
            class="char-type-item"
            :class="{ active: passwordConfig.includeLowercase }"
            @click="toggleCharType('includeLowercase')"
          >
            <text class="char-type-text">小写字母 (a-z)</text>
            <text class="char-type-example">abc</text>
          </view>

          <view
            class="char-type-item"
            :class="{ active: passwordConfig.includeNumbers }"
            @click="toggleCharType('includeNumbers')"
          >
            <text class="char-type-text">数字 (0-9)</text>
            <text class="char-type-example">123</text>
          </view>

          <view
            class="char-type-item"
            :class="{ active: passwordConfig.includeSymbols }"
            @click="toggleCharType('includeSymbols')"
          >
            <text class="char-type-text">特殊符号</text>
            <text class="char-type-example">!@#</text>
          </view>
        </view>
      </view>

      <!-- 高级选项 -->
      <view class="option-group">
        <text class="option-label">高级选项</text>

        <view class="advanced-options">
          <view
            class="advanced-option"
            :class="{ active: passwordConfig.excludeAmbiguous }"
            @click="toggleAdvancedOption('excludeAmbiguous')"
          >
            <text class="option-text">排除易混淆字符</text>
            <text class="option-desc">如: 0oO, 1lI 等</text>
          </view>

          <view
            class="advanced-option"
            :class="{ active: passwordConfig.excludeSimilar }"
            @click="toggleAdvancedOption('excludeSimilar')"
          >
            <text class="option-text">排除相似字符</text>
            <text class="option-desc">如: il1Lo0O 等</text>
          </view>

          <view
            class="advanced-option"
            :class="{ active: passwordConfig.noRepeats }"
            @click="toggleAdvancedOption('noRepeats')"
          >
            <text class="option-text">避免重复字符</text>
            <text class="option-desc">每个字符最多出现一次</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="generate-btn primary" @click="generatePassword">
        生成新密码
      </button>

      <button class="use-btn" @click="usePassword" :disabled="!generatedPassword">
        使用此密码
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { generateSecurePassword, calculatePasswordStrength } from '@/utils/password'

interface PasswordGeneratorEmits {
  (event: 'generated', password: string): void
  (event: 'use', password: string): void
}

const emit = defineEmits<PasswordGeneratorEmits>()

// 响应式数据
const generatedPassword = ref('')
const hidePassword = ref(true)

// 密码配置
const passwordConfig = ref({
  length: 12,
  includeUppercase: true,
  includeLowercase: true,
  includeNumbers: true,
  includeSymbols: true,
  excludeAmbiguous: false,
  excludeSimilar: false,
  noRepeats: false
})

// 计算属性
const strengthLevel = computed(() => {
  if (!generatedPassword.value) {
    return { percentage: 0, text: '未生成', class: 'weak' }
  }

  const strength = calculatePasswordStrength(generatedPassword.value)

  if (strength >= 80) {
    return { percentage: 100, text: '非常强', class: 'very-strong' }
  } else if (strength >= 60) {
    return { percentage: 80, text: '强', class: 'strong' }
  } else if (strength >= 40) {
    return { percentage: 60, text: '中等', class: 'medium' }
  } else if (strength >= 20) {
    return { percentage: 40, text: '弱', class: 'weak' }
  } else {
    return { percentage: 20, text: '很弱', class: 'very-weak' }
  }
})

// 页面加载时生成密码
onMounted(() => {
  generatePassword()
})

// 生成密码
const generatePassword = () => {
  try {
    const password = generateSecurePassword(passwordConfig.value)
    generatedPassword.value = password
    emit('generated', password)
  } catch (error) {
    console.error('生成密码失败:', error)
    uni.showToast({
      title: '生成密码失败',
      icon: 'none'
    })
  }
}

// 更新密码长度
const updateLength = (event: any) => {
  passwordConfig.value.length = event.detail.value
  generatePassword()
}

// 切换字符类型
const toggleCharType = (type: keyof typeof passwordConfig.value) => {
  passwordConfig.value[type] = !passwordConfig.value[type]

  // 确保至少选择一种字符类型
  const hasAnyType = passwordConfig.value.includeUppercase ||
                     passwordConfig.value.includeLowercase ||
                     passwordConfig.value.includeNumbers ||
                     passwordConfig.value.includeSymbols

  if (!hasAnyType) {
    passwordConfig.value.includeLowercase = true
  }

  generatePassword()
}

// 切换高级选项
const toggleAdvancedOption = (option: keyof typeof passwordConfig.value) => {
  passwordConfig.value[option] = !passwordConfig.value[option]
  generatePassword()
}

// 切换密码可见性
const togglePasswordVisibility = () => {
  hidePassword.value = !hidePassword.value
}

// 复制密码
const copyPassword = async () => {
  if (!generatedPassword.value) {
    uni.showToast({
      title: '没有可复制的密码',
      icon: 'none'
    })
    return
  }

  try {
    await uni.setClipboardData({
      data: generatedPassword.value
    })
    uni.showToast({
      title: '密码已复制',
      icon: 'success'
    })
  } catch (error) {
    uni.showToast({
      title: '复制失败',
      icon: 'none'
    })
  }
}

// 使用密码
const usePassword = () => {
  if (!generatedPassword.value) {
    uni.showToast({
      title: '请先生成密码',
      icon: 'none'
    })
    return
  }

  emit('use', generatedPassword.value)
}
</script>

<style lang="scss" scoped>
.password-generator {
  padding: 20px;
  background: white;
  border-radius: 12px;

  .password-display {
    margin-bottom: 24px;

    .password-wrapper {
      position: relative;
      margin-bottom: 12px;

      .password-input {
        width: 100%;
        padding: 16px 80px 16px 16px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        font-size: 16px;
        font-family: 'Courier New', monospace;
      }

      .password-actions {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 4px;

        .action-btn {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          background: rgba(24, 144, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.2s;

          .action-icon {
            font-size: 14px;
            color: #1890ff;
          }

          &:active {
            transform: scale(0.9);
            background: rgba(24, 144, 255, 0.2);
          }
        }
      }
    }

    .strength-indicator {
      display: flex;
      align-items: center;
      gap: 12px;

      .strength-bar {
        flex: 1;
        height: 4px;
        background: #f0f0f0;
        border-radius: 2px;
        overflow: hidden;

        .strength-fill {
          height: 100%;
          transition: all 0.3s;

          &.very-weak {
            background: #ff4d4f;
          }

          &.weak {
            background: #ff7a45;
          }

          &.medium {
            background: #ffa940;
          }

          &.strong {
            background: #52c41a;
          }

          &.very-strong {
            background: #1890ff;
          }
        }
      }

      .strength-text {
        font-size: 12px;
        font-weight: 600;

        &.very-weak {
          color: #ff4d4f;
        }

        &.weak {
          color: #ff7a45;
        }

        &.medium {
          color: #ffa940;
        }

        &.strong {
          color: #52c41a;
        }

        &.very-strong {
          color: #1890ff;
        }
      }
    }
  }

  .password-options {
    .option-group {
      margin-bottom: 20px;

      .option-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .option-label {
          font-size: 14px;
          color: #333;
          font-weight: 600;
        }

        .option-value {
          font-size: 14px;
          color: #1890ff;
          font-weight: 600;
        }
      }

      .option-label {
        display: block;
        font-size: 14px;
        color: #333;
        font-weight: 600;
        margin-bottom: 12px;
      }

      .length-slider {
        width: 100%;
      }

      .char-types,
      .advanced-options {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .char-type-item,
      .advanced-option {
        padding: 12px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        transition: all 0.2s;

        &.active {
          border-color: #1890ff;
          background: rgba(24, 144, 255, 0.05);
        }

        &:active {
          transform: scale(0.98);
        }
      }

      .char-type-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .char-type-text {
          font-size: 14px;
          color: #333;
        }

        .char-type-example {
          font-size: 12px;
          color: #666;
          font-family: 'Courier New', monospace;
        }
      }

      .advanced-option {
        .option-text {
          display: block;
          font-size: 14px;
          color: #333;
          margin-bottom: 4px;
        }

        .option-desc {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;

    button {
      flex: 1;
      padding: 14px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.2s;

      &:active {
        transform: scale(0.98);
      }

      &:disabled {
        opacity: 0.6;
        transform: none !important;
      }
    }

    .generate-btn {
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      color: white;
    }

    .use-btn {
      background: #f6f6f6;
      color: #333;
      border: 1px solid #d9d9d9;

      &:not(:disabled):active {
        background: #e6e6e6;
      }
    }
  }
}
</style>